<template>
  <div class="wrapper">
    <div class="content">
      <div class="search_input">
        <a-input-search
          placeholder="请输入目的地"
          style="width: 500px"
          @search="onSearch"
        />
      </div>
      <div class="number_info">热门目的地推荐</div>
      <div class="mytabs">
        <a-tabs default-active-key="1" size="large">
          <a-tab-pane key="1" tab="推荐">
            <div class="tuijian-div">
              <div class="tuijian_item">
                <div class="title">热门海岛</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in hd_city_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">全球top9</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in top9_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">免签证地区</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in mq_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="亚洲">
            <div class="tuijian-div">
              <div class="tuijian_item">
                <div class="title">中国</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in zg"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">泰国</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in top9_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">印度尼西亚</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in mq_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="大洋洲"
            ><div class="tuijian-div">
              <div class="tuijian_item">
                <div class="title">新西兰</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in zg_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">澳大利亚</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in top9_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">斐济</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in mq_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="欧洲"
            ><div class="tuijian-div">
              <div class="tuijian_item">
                <div class="title">法国</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in zg_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">英国</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in top9_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">希腊</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in mq_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="美洲"
            ><div class="tuijian-div">
              <div class="tuijian_item">
                <div class="title">美国</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in zg_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">墨西哥</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in top9_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">加拿大</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in mq_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="6" tab="非洲"
            ><div class="tuijian-div">
              <div class="tuijian_item">
                <div class="title">毛里求斯</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in zg_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">坦桑尼亚</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in top9_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
              <div class="tuijian_item">
                <div class="title">南非</div>
                <div class="city">
                  <div
                    class="city_item"
                    v-for="(item, index) in mq_array"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div style="font-size: 18px; text-align: center">
        您的历史游玩景点统计如下：
      </div>
      <div style="display: flex; justify-content: space-around">
        <div ref="echart3" style="width: 500px; height: 350px"></div>
      </div>
      <div class="number_info">基于以上统计信息进行推荐</div>
      <div class="chart_tuijian">
        <div class="ctuijian_tiem">
          <div class="ctuijian_img img10"></div>
          <div class="ctuijian_name">芽庄</div>
        </div>
        <div class="ctuijian_tiem">
          <div class="ctuijian_img img11"></div>
          <div class="ctuijian_name">莫干山</div>
        </div>
        <div class="ctuijian_tiem">
          <div class="ctuijian_img img12"></div>
          <div class="ctuijian_name">京都府</div>
        </div>
        <div class="ctuijian_tiem">
          <div class="ctuijian_img img13"></div>
          <div class="ctuijian_name">四川</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  props: {},
  data() {
    return {
      hd_city_array: [
        "巴厘岛",
        "圣托里尼岛",
        "芽庄",
        "普吉岛",
        "苏梅岛",
        "西西里大区",
        "马尔代夫",
        "毛里求斯",
        "塞舌尔",
      ],
      top9_array: [
        "北海道",
        "洛杉矶",
        "甲米",
        "京都府",
        "纽约",
        "皇后镇",
        "清迈",
        "巴黎",
        "伦敦",
      ],
      mq_array: [
        "毛里求斯",
        "塞舌尔",
        "马尔代夫",
        "马达加斯加",
        "苏梅岛",
        "普吉岛",
        "巴厘岛",
        "清迈",
      ],
      zg_array: [
        "毛里求斯",
        "塞舌尔",
        "马尔代夫",
        "马达加斯加",
        "苏梅岛",
        "普吉岛",
        "巴厘岛",
        "清迈",
      ],
      zg: ["北京", "上海", "云南", "海南", "浙江", "新疆", "四川", "西藏"],
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 32, name: "山川湖泊" },
              { value: 24, name: "海岛沙滩" },
              { value: 16, name: "网红打卡点" },
              { value: 13, name: "度假山庄" },
              { value: 19, name: "古建筑景点" },
            ],
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    onSearch() {
      console.log("search");
    },
  },
  created() {},
  mounted() {
    let myChart = echarts.init(this.$refs.echart3);
    myChart.setOption(this.option);
  },
};
</script>
<style scoped lang="less">
.wrapper {
  background-color: rgb(245, 245, 245);
  .content {
    background-color: rgb(245, 245, 245);
    margin-top: 68px;
    .search_input {
      background-color: #fff;
      text-align: center;
      line-height: 60px;
    }
    .number_info {
      font-size: 20px;
      text-align: center;
      line-height: 60px;
    }
    .mytabs {
      padding: 20px 20%;
      background-color: rgb(244, 244, 244);
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
::v-deep .ant-input {
  height: 40px;
  border-radius: 6px;
}
.city {
  display: flex;
  flex-wrap: wrap;
  .city_item {
    font-size: 16px;
    width: 33%;
  }
}
.tuijian-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  font-size: 20px;
  text-align: center;
  line-height: 2rem;
  padding-bottom: 10px;
}
.tuijian_item {
  background-color: #fff;
  margin: 10px;
}
.ctuijian_img {
  width: 260px;
  height: 260px;
  background-size: cover;
}
.img10 {
  background-image: url(~@/assets/imgs/yz.jpg);
}
.img11 {
  background-image: url(~@/assets/imgs/ctuijian_2.jpg);
}
.img12 {
  background-image: url(~@/assets/imgs/jdf.jpg);
}
.img13 {
  background-image: url(~@/assets/imgs/sichuan.jpg);
}
.chart_tuijian {
  padding: 0 10%;
  display: flex;
  flex-wrap: wrap;
  .ctuijian_tiem{
    position: relative;
    margin: 0 40px 10px 0;
  }
}
.ctuijian_name{
      font-size: 26px;
      color:#fff;
      position:absolute;
      bottom:20px;
      left:20px;
      font-weight: bold;
    }
</style>